<template>
	<view class="content">
		<view class="table-top-box">
			<view class="search-box">
				<view class="search-left-box">
					<uni-search-bar @confirm="search" v-model="searchValue" @cancel="cancel" @clear="clear"
						placeholder="输入存货编码">
					</uni-search-bar>
				</view>
				<view class="search-right-box">
					<uni-search-bar @confirm="search" v-model="searchValue1" @cancel="cancel1" @clear="clear1"
						placeholder="输入产品型号">
					</uni-search-bar>
				</view>
			</view>
			<view class="top-bnt">
				<!-- <view class="top-left-box">
					全选
				</view> -->
				<view class="top-right-box" v-if="checkPermi(['develop:auditPass:piliangBnt'])">
					<view class="piliangBnt">
						分类筛选
					</view>
				</view>
			</view>
		</view>
		<z-paging ref="paging" v-model="dataList" :default-page-size="row" @onRefresh="onRefresh" @query="getList"
			auto-show-system-loading auto-show-back-to-top>
			<view class="" style="margin-top: 180rpx;"></view>
			<view class="list-box" v-for="(item,index) in dataList" :key="index">
				<view class="top-box">
					<view class="tiem-box">
						存货编码：{{item.code}}
					</view>
					<view class="status-box">
						<view class="item-box">
							是否拆解:{{item.ischaijie}}
						</view>
					</view>
				</view>
				<view class="xian"></view>
				<view class="title-box" v-if="item.name">
					产品名称:{{item.name}}
				</view>
				<view class="info-box">
					<view class="info-item" v-if="item.model">
						<view class="info-item-title">
							产品型号
						</view>
						<view class="info-item-text">
							{{item.model}}
						</view>
					</view>
					<view class="info-item" v-if="item.count">
						<view class="info-item-title">
							存货数量
						</view>
						<view class="info-item-text">
							{{item.count}}
						</view>
					</view>
					<view class="info-item" v-if="item.remainderCount">
						<view class="info-item-title">
							可用数量
						</view>
						<view class="info-item-text">
							{{item.remainderCount}}
						</view>
					</view>
				</view>
				<view class="text-box" v-if="item.unit">
					计量单位：{{item.unit}}
				</view>
				<view class="text-box" v-if="item.costPrice">
					存货单价：{{item.costPrice}}
				</view>
				<view class="text-box" v-if="item.cost">
					存货总价：{{item.cost}}
				</view>
				<view class="xian"></view>
				<view class="bnt-box">
					<view class="bnt-big-box">
						<!-- <view class="bnt">
							入库
						</view>
						<view class="bnt">
							出库
						</view>
						<view class="bnt">
							修改
						</view>
						<view class="bnt">
							关联订单
						</view> -->
						<view class="bnt" @click="goto('/pagesA/kindsAdmin/inventoryManagement/stockRecord/index',item)">
							出入库记录
						</view>
						<!-- <view class="bnt">
							使用明细
						</view> -->
						<!-- <view class="bnt" @click="goto('/pagesA/kindsAdmin/inventoryManagement/relatedProcesses/index',item)">
							关联工艺
						</view>
						<view class="bnt" @click="goto('/pagesA/kindsAdmin/inventoryManagement/productDisassembly/index',item)">
							产品拆解
						</view> -->
					</view>
				</view>
			</view>
			<view style="height: 200rpx;">
			</view>
		</z-paging>
	</view>
</template>

<script>
	import * as index from '@/api/index.js'
	export default {
		data() {
			return {
				status: '',
				signImg: '',
				inputValue: '',
				inputValue1: '',
				infoItem: {},
				text: '',
				searchValue: '',
				row: 10,
				tabList: [],
				tableIndex: '', //当前选择
				dataList: [],
			}
		},
		onLoad() {
			if (this.checkPermi(['develop:auditPass:list'])) {
				this.tableIndex = 2
			}
		},
		onShow() {
			this.signImg = uni.getStorageSync('signImg')
		},
		methods: {
			// 当页面滚动到底部事件被触发
			onReachBottom() {
				// 通知z-paging滚动到底部了，z-paging会进行相应的处理，例如加载更多数据
				this.$refs.paging.pageReachBottom();
			},
			// 下拉刷新被触发
			onRefresh() {
				// 告知z-paging下拉刷新结束，这样才可以开始下一次的下拉刷新
				setTimeout(() => {
					this.$tools.toast('刷新成功～')
				}, 500)
			},
			// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用this.$refs.paging.reload()即可
			getList(pageNum, pageSize) {
				// this.$refs.paging.complete(false);
				index.goodsOrderInListList({
					pageNum,
					pageSize,
					code: this.searchValue
				}).then(res => {
					console.log(res, '这是什么')
					var data = res.rows
					data.forEach(item => {
						item.checked = false
					})
					this.$refs.paging.complete(data);

				})
			},
			inputDialogToggle(item, e) {
				uni.navigateTo({
					url: '/pagesA/sign/sign'
				})
			},
			inputDialogToggle1(item, e) {
				this.infoItem = item
				this.infoItem.assessOpinion = ''
				this.text = e
				this.$refs.inputDialog1.open()
			},
			tableChange(item, index) {
				this.tableIndex = item
				this.piliangStatus = false,
					this.quanxuanStatus = false,
					this.$refs.paging.reload()
			},
			goto(Url,item) {
				console.log(Url,item)
				uni.navigateTo({
					url: Url + '?id=' + item.id
				})
			},
			search(res) {
				this.$refs.paging.reload()
			},
			cancel() {
				this.searchValue = ''
				this.$refs.paging.reload()
			},
			close() {
				this.inputValue = '';
				this.$refs.inputDialog.close()
			},
			cancel1() {
				this.searchValue1 = ''
				this.$refs.paging.reload()
			},
			bindDateChange(e) { // 新增日期选择事件
				// this.daohuoDate = e.target.value
			},
			changeLog(e) {
				console.log('change事件:', e);
				let date = new Date(e);
				let year = date.getFullYear();
				// 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
				let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				// 拼接
				// return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
				this.fahuoDate = year + "-" + month + "-" + day;
				this.$refs.paging.reload()
			},
			

		}

	}
</script>

<style lang="scss">
	.foot-box {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 180rpx;
		background: #FFF;
		display: flex;
		align-items: center;
		justify-content: center;

		.rejectBnt {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 346rpx;
			height: 88rpx;
			border-radius: 8rpx;
			border: 2rpx solid rgba(0, 167, 154, 0.44);
			background: #F5F6F8;
			color: #00A79A;
			font-size: 32rpx;
			margin-left: 15rpx;
		}

		.consentBnt {
			margin-left: 18rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 346rpx;
			height: 88rpx;
			border-radius: 8rpx;
			border: 2rpx solid rgba(0, 167, 154, 0.44);
			background: #4D8987;
			color: #FFFFFF;
			font-size: 32rpx;
		}
	}

	.center-box {
		width: 520rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding-top: 50rpx;

		.title-box {
			font-size: 32rpx;
			color: #333333;
			text-align: center;
			padding: 0rpx 100rpx 30rpx;
			border-bottom: 1px solid #F0F0F0;
		}

		.text-box {
			font-size: 28rpx;
			color: #999;
			// text-align: center;
			padding: 30rpx;
			display: flex;
			align-items: center;
		}

		.bottom-box {
			border-top: 2rpx solid #F0F0F0;
			display: flex;
			align-items: center;

			.cancel-box {
				width: 260rpx;
				height: 95rpx;
				font-size: 32rpx;
				text-align: center;
				line-height: 95rpx;
				color: #333333;
				border-right: 2rpx solid #F0F0F0;
			}

			.confirm-box {
				width: 260rpx;
				height: 95rpx;
				background: #2979FF;
				text-align: center;
				line-height: 95rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				border-bottom-right-radius: 16rpx;
			}
		}
	}

	.content {

		// padding-left: 20rpx;
		// padding-right: 20rpx;
		.table-top-box {
			width: 750rpx;
			position: sticky;
			top: 0;
			z-index: 2;

			.search-box {
				width: 750rpx;
				height: 103rpx;
				background: #FFFFFF;
				z-index: 99;
				display: flex;
				align-items: center;

				.search-left-box {
					width: 50%;
				}

				.search-right-box {
					width: 45%;
				}
			}

			.table-box {
				width: 750rpx;
				background: #ffffff;
				display: flex;
				justify-content: space-around;

				.table {
					padding: 23rpx 0;
					font-size: 28rpx;
					font-weight: 400;
					color: #666666;
					display: flex;
					flex-direction: column;
					align-items: center;

					.border {
						margin-top: 10rpx;
						width: 32rpx;
						height: 4rpx;
					}
				}

				.tableChange {
					padding: 23rpx 0;
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;
					display: flex;
					flex-direction: column;
					align-items: center;

					.border {
						margin-top: 10rpx;
						width: 32rpx;
						height: 4rpx;
						background: #8295BC;
					}
				}
			}

			.top-bnt {
				padding-top: 10rpx;
				padding-bottom: 10rpx;
				z-index: 2;
				display: flex;
				align-items: center;
				background-color: #F1F1F1;

				.top-left-box {
					display: flex;
					align-items: center;
					height: 60rpx;
					margin-left: 15rpx;
				}

				.top-right-box {
					margin-left: auto;
					margin-right: 15rpx;

					.piliangBnt {
						width: 160rpx;
						height: 60rpx;
						border-radius: 10rpx;
						background: #FFF;
						flex-shrink: 0;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #4D8987;
						font-size: 24rpx;
					}

					.closeBnt {
						width: 160rpx;
						height: 60rpx;
						border-radius: 10rpx;
						background: #4D8987;
						flex-shrink: 0;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #FFF;
						font-size: 24rpx;
					}
				}
			}
		}

		.search-box {
			width: 750rpx;
			height: 103rpx;
			background: #FFFFFF;
		}

		.list-box {
			padding-left: 20rpx;
			padding-right: 20rpx;
			margin-top: 20rpx;
			border-radius: 8rpx;
			background: #FFF;

			.top-box {
				display: flex;
				align-items: center;
				padding: 20rpx 0rpx;

				.tiem-box {
					color: #999;
					font-size: 24rpx;
				}

				.status-box {
					margin-left: auto;
					display: flex;
					align-items: center;

					.item-box {
						padding: 4rpx 12rpx;
						height: 42rpx;
						border-radius: 10rpx;
						background: #F5F7FB;
						color: #8295BC;
						font-size: 24rpx;
					}
				}
			}

			.xian {
				width: 662rpx;
				border-bottom: 1px solid #EAEAEA;
			}

			.title-box {
				padding-top: 20rpx;
				padding-bottom: 20rpx;
				color: #333;
				font-size: 28rpx;
				font-weight: bold;
			}

			.info-box {
				display: flex;
				align-items: center;
				border-radius: 8rpx;
				background: #F5F7FB;
				padding-top: 10rpx;
				padding-bottom: 10rpx;

				.info-item {
					flex: 1;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.info-item-title {
						color: #999;
						font-size: 24rpx;
					}

					.info-item-text {
						margin-top: 8rpx;
						color: #333;
						font-size: 28rpx;
						font-weight: bold;
					}
				}
			}

			.text-box {
				padding-top: 20rpx;
				padding-bottom: 20rpx;
				color: #999;
				font-size: 24rpx;
			}

			.bnt-box {
				padding-top: 20rpx;
				padding-bottom: 20rpx;

				.bnt-big-box {
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;

					.bnt {
						color: #4D8987;
						font-size: 24rpx;
						flex: 0 0 24%;
						height: 30px;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 10rpx;
						background: #F5F7FB;
						text-align: center;
						/* 边距懒得算，css函数代替 */
						margin-right: calc(4% / 3);
						margin-bottom: calc(4% / 3);

					}

					/* 去除每行尾的多余边距 */
					.bnt:nth-child(4n) {
						margin-right: 0;
					}

					/* 使最后一个元素的边距填满剩余空间 */
					.bnt:last-child {
						margin-right: auto;
					}
				}
			}
		}
	}
</style>